<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="insuranceOfferDiv">

        <div class="layui-tab" id="insuranceOfferTab" lay-filter="insuranceOfferTab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>待报价</li>
                <li>已报价</li>
            </ul>
        </div>


        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="insuranceOfferSearchName" placeholder="联络人" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="insuranceOfferSearchPhone" placeholder="电话" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" id="insuranceOfferSearch">搜索</button>
            </div>
        </div>


        <table class="layui-hide" lay-filter="insuranceOfferTable" id="insuranceOfferTable"></table>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.use(['element', 'form', 'table', 'form', 'jquery'], function () {
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        var status;
        table.render({
            elem: '#insuranceOfferTable'
            , url: '/insuranceOffer'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'ownerName', title: '车主姓名', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'insuranceName', title: '保险公司', align: 'center'}
                , {field: 'ownerPhone', title: '电话', align: 'center'}
                , {field: 'plate', title: '车牌', align: 'center'}
                , {field: 'createDate', title: '询价时间', align: 'center'}
                , {field: 'offerDate', title: '报价时间', align: 'center'}
                , {field: 'offerPeopleName', title: '报价人', align: 'center'}
                , {
                    field: 'isTransfer', title: '是否过户车', align: 'center', templet: function (d) {
                        var str = '';
                        var isTransfer = d.isTransfer;
                        if (isTransfer == true) {
                            str = "<div>是</div>"
                        } else {
                            str = "<div>否</div>"
                        }
                        return str;
                    }
                }
                , {
                    field: 'status', title: '状态', align: 'center', templet: function (d) {
                        var str;
                        var status = d.status;
                        if (status == false) {
                            str = "<div>待报价</div>"
                        } else {
                            str = "<div>已报价</div>"
                        }
                        return str;
                    }
                }
                , {
                    title: '操作', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.offerPeopleId;
                        if (!status) {
                            str = "<a class=\"layui-btn layui-btn-sm updateBtn\" data-id='"+d.ioId+"'>设为已报价</a>"
                        }
                        return str;
                    }
                }
            ]]
            , page: true
        });


        $('#insuranceOfferDiv').on('click', '.updateBtn', function (res) {
            var ioId = $(this).attr("data-id");
            var y = $(window).height()-window.screen.height/2;
            layer.confirm('是否确定设为已报价？', {
                offset: y,
                skin: 'layui-layer-admin',
                success: function(layero){
                    //按钮居中
                    layero.find('.layui-layer-btn').css('text-align', 'center')
                },
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.ajax({
                    url: '/insuranceOffer',
                    method: 'Post',
                    data: {ioId: ioId},
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});
                            table.reload('insuranceOfferTable', {where: {status: status}})
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            })
        })

        //搜索
        $('#insuranceOfferSearch').click(function () {
            var name = $('#insuranceOfferSearchName').val();
            var phone = $('#insuranceOfferSearchPhone').val();
            table.reload('insuranceOfferTable', {where: {ownerName: name, ownerPhone: phone, status: status}})
        })


        element.on('tab(insuranceOfferTab)', function (data) {
            console.log(data)
            if (data.index == 0) {
                status = null;
            } else if (data.index == 1) {
                status = false;
            } else if (data.index == 2) {
                status = true;
            }
            table.reload('insuranceOfferTable', {where: {status: status}})
        });


    })
</script>
</body>
</html>
